<template>
    <div>
        <el-form :inline="true" size="small" :model="formInline" class="demo-form-inline">

            <el-form-item>
                <el-select v-model="formInline.one" placeholder="Activity zone">
                    <template #prefix>
                        <span style="color:#585656">语言:</span>
                    </template>
                    <el-option label="全部" value="" />
                    <el-option v-for="item of language" :key="item.name['en-US']" :label="item.name['zh-CN']"
                        :value="item.name['en-US']" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-select v-model="formInline.two" placeholder="Activity zone">
                    <template #prefix>
                        <span style="color:#585656">语言:</span>
                    </template>
                    <el-option label="全部" value="" />
                    <el-option v-for="item of language" :key="item.name['en-US']" :label="item.name['zh-CN']"
                        :value="item.name['en-US']" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-select v-model="formInline.three" placeholder="Activity zone">
                    <template #prefix>
                        <span style="color:#585656">领域:</span>
                    </template>
                    <el-option label="全部" value="" />
                    <el-option v-for="item of fieldlist" :key="item.name['en-US']" :label="item.name['zh-CN']"
                        :value="item.name['en-US']" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-input v-model="formInline.four" placeholder="请输入库名称" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">搜索</el-button>
                <el-button type="primary" @click="onSubmit">重置</el-button>
            </el-form-item>
        </el-form>

        <div style="padding:10px 0">
            <el-button type="primary" size="small" @click="buildLibs" :icon="Plus"
                plain>新建{{ type === 'memory' ? '记忆库' : '术语库' }}</el-button>
            <el-button type="danger" size="small" :icon="Delete" plain>删除</el-button>
        </div>
        <el-table  @row-click="rowClick" :data="dataSource" stripe :header-cell-style="{ background: '#f2f2f2' }">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="name" :label="type === 'memory' ? '记忆库名称' : '术语库名称'"></el-table-column>
            <el-table-column prop="numItems" label="句对数"></el-table-column>
            <el-table-column prop="text3" label="语言">
                <template v-slot="{ row }">
                    中文简体 - 英语
                </template>
            </el-table-column>
            <el-table-column prop="text4" label="领域">
                <template v-slot="{ row }">
                    通用领域
                </template>
            </el-table-column>
            <el-table-column prop="userName" label="创建人"></el-table-column>
            <el-table-column prop="updatedWhen" label="更新日期"></el-table-column>
       
                <el-table-column prop="text4" label="领域">
                    <template v-slot="{ row }">
                        <el-switch v-model="row.enabled" class="ml-2"
                            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
                    </template>
                </el-table-column>
  
            <el-table-column prop="text1" label="操作"></el-table-column>

        </el-table>

    </div>
</template>

<script setup>
import { reactive } from 'vue'
import { listObject } from '@/utils/languagelist.ts'
import { Plus, Delete } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';
import { rowList } from './data'
let router = useRouter()
const props = defineProps({
    type: {
        type: String,
        default: () => 'memory'
    }
})
const formInline = reactive({
    one: '',
    two: '',
    three: '',
    four: '',
})

const dataSource = rowList

const language = listObject.languagelist.map((item => {
    return {
        ...item,
        name: JSON.parse(item.name)
    }
}))
const fieldlist = listObject.fieldlist.map((item => {
    return {
        ...item,
        name: JSON.parse(item.name)
    }
}))
const buildLibs = () => {
    if (props.type === 'memory') {
        router.push({ name: 'create-libs', query: { type: 'memory-libs' } })
    } else {
        router.push({ name: 'create-libs', query: { type: 'term-libs' } })
    }
}
const rowClick=(row)=>{
    if (props.type === 'memory') {
        router.push({ name: 'memory-libs-details', params: { id: row.id } })
    } else {
        router.push({ name: 'term-libs-details', params: { id: row.id }})
    }
}


const onSubmit = () => {
    console.log('submit!')
}
</script>

<style lang="scss" scoped></style>